<template>
    <div class="personal-information">
        <div class="personal-center-setBth" @click="openSet" v-if="!state.change">&#xe65a;</div>
        <div class="personal-information-title">
            <h5>个人信息：</h5>
        </div>
        <div class="personal-information-box">
            <div class="personal-information-item">
                <div class="personal-information-itemBind1">手机：</div>
                <div class="personal-information-itemBind2"><input type="text" id="phone" v-model="datas.phoneNumber" :disabled="!state.phone"></div>
                <div class="personal-information-itemBind3 nice-btn-dBlue" v-if="state.change" @click="changeBbind(0)">更换</div>
            </div>
            <div class="personal-information-item2">
                <div class="personal-information-itemBind1">用户名：</div>
                <div class="personal-information-item2Bind" :class="{itemBindC:state.change}"><input type="text" id="usrNm" v-model="datas.userNumebr" :disabled="!state.change"></div>
                <div class="personal-information-must" title="必填项">*</div>
            </div>
            <div class="personal-information-item2">
                <div class="personal-information-itemBind1">姓名：</div>
                <div class="personal-information-item2Bind" :class="{itemBindC:state.change}"><input type="text" id="compellation" v-model="datas.name" :disabled="!state.change"></div>
                <div class="personal-information-must" title="必填项">*</div>
            </div>
            <div class="personal-information-item2">
                <div class="personal-information-itemBind1">部门：</div>
                <div class="personal-information-item2Bind" :class="{itemBindC:state.change}">
                    <input type="text" id="dptList" v-model="datas.department" disabled="disabled">
                </div>
            </div>
            <div class="personal-information-item2">
                <div class="personal-information-itemBind1">职务：</div>
                <div  class="personal-information-item2Bind" :class="{itemBindC:state.change}"><input type="text" id="duty" v-model="datas.duty" :disabled="!state.change"></div>
            </div>
            <div class="personal-information-item">
                <div class="personal-information-itemBind1">邮箱：</div>
                <div class="personal-information-itemBind2"><input type="text" id="email" v-model="datas.email" :disabled="!state.email"></div>
                <div class="personal-information-itemBind3 bindemail nice-btn-dBlue" v-if="isTrue1" @click="changeBbind(1)">解绑</div>
                <div class="personal-information-itemBind3 bindemail nice-btn-dBlue" v-if="isTrue2" @click="changeBbind(2)">绑定</div>
            </div>
            <div class="personal-information-select" v-if="state.change">
                <div class="determine-tip" v-if="1==0"><span class="plales-warning-icon">&#xe64a;</span>请填写完整的信息！</div>
                <div class="personal-information-determine information-qe nice-btn-lBlue" @click="tHdata">确认</div>
                <div class="personal-information-cancel information-of cancel-btn-ordinary" @click="shut">取消 </div>
            </div>
            <validation v-if="sta" v-on:thisKg="thisKg" v-on:swit="swit" :clas="genre"></validation>
            <email v-if="email" v-on:close="close"></email>
            <emai2 v-if="emai2" v-on:close="close"></emai2>
            <phone v-if="phone" v-on:close="close"></phone>
        </div>
    </div>
</template>
<script>
    import email from './../public/unbundling.vue'
    import emai2 from './../userCenter/emali.vue'
    import phone from './../userCenter/phone.vue'
    import validation from './../public/validation.vue'
    export default {
        data(){
            return{
                datas:{
                    phoneNumber:'',
                    userNumebr:'',
                    department:'',
                    name:'',
                    duty:'',
                    email:''
                },
                data:{
                    phoneNumber:'',
                    userNumebr:'',
                    department:'',
                    name:'',
                    duty:'',
                    email:''
                },
                state:{
                    change:false,
                    phone:false,
                    email:false
                },
                sta:0,
                genre:'',
                email:0,
                emai2:0,
                phone:0
            }
        },
        computed:{
            isTrue1:function () {
                if(this.state.change&&this.data.email!=''){
                    return true;
                }
            },
            isTrue2:function () {
                if(this.state.change&&this.data.email==''){
                    return true;
                }
            }
        },
        methods:{
            swit:function () {
                if(this.genre==1){
                    $.ajax({
                        type:'post',
                        url : '/unbindMail',
                        dataType:'json',
                        success:(data)=>{
                            if(data.opResult==0){
                                this.data.email='';
                                this.shut();
                                this.sta=0;
                                this.email=1;
                                this.emai2=0;
                            }else if(data.opResult==1){
                                //解绑失败
                            }
                        }
                    });
                }else if(this.genre==2){
                    this.emai2=1;
                    this.email=0;
                    this.sta=0;
                }else if(this.genre==0){
                    this.emai2=0;
                    this.email=0;
                    this.phone=1;
                    this.sta=0;
                }
            },
            close:function () {
                this.thisKg();
            },
            thisKg:function () {
                this.sta=0;
                this.email=0;
                this.emai2=0;
                this.phone=0;
            },
            tHdata:function () {
                $.ajax({
                    url:'/employee_update',
                    type:'post',
                    data:{
                        usrNm:(this.datas.userNumebr!=null&&this.datas.userNumebr!=undefined ? this.datas.userNumebr:""),  //-用户名
                        phone:(this.datas.phoneNumber!=null&&this.datas.phoneNumber!=undefined ? this.datas.phoneNumber:""),  //-手机号
                        compellation:(this.datas.name!=null&&this.datas.name!=undefined ? this.datas.name:""),  //-姓名
                    },
                    dataType:'json',
                    success:(val)=>{
                        if(val!=null&&val.success.opResult=='0'){
                            $('.useName-n').text(val.success.user.usrNm);
                            alert('修改成功');
                            this.data.userNumebr=this.datas.userNumebr;
                            this.data.department=this.datas.department;
                            this.data.name=this.datas.name;
                            this.data.duty=this.datas.duty;
                            this.state.change=false;
                            return;
                        }else if(val!=null&&val.success.opResult=='4'){
                            alert('用户名重复');
                        }else if(val!=null&&val.success.opResult=='3'){
                            alert('用户名不能为空');
                        }else if(val!=null&&val.success.opResult=='0'){
                            alert('服务器繁忙');
                        }else{
                            alert('修改失败');
                        }
                        this.datas.userNumebr=this.data.userNumebr;
                        this.datas.department=this.data.department;
                        this.datas.name=this.data.name;
                        this.datas.duty=this.data.duty;
                        this.state.change=true;
                    },
                    error:(val)=>{
                        console.log(val);
                    }
                });
            },
            openSet:function () {
                this.datas.userNumebr=this.data.userNumebr;
                this.datas.department=this.data.department;
                this.datas.name=this.data.name;
                this.datas.duty=this.data.duty;
                this.state.change=true;
            },
            shut:function () {
                this.datas.userNumebr=this.data.userNumebr;
                this.datas.department=this.data.department;
                this.datas.name=this.data.name;
                this.datas.duty=this.data.duty;
                this.datas.phoneNumber=this.data.phoneNumber;
                this.datas.email=this.data.email;
                this.state.change=false;
                this.state.email=false;

            },
            changeBbind:function (val) {
                if(val==0){
                    this.genre=0;  //更换手机号码
                }else if(val==1){
                    this.genre=1;  //解绑邮箱
                }else if(val==2){
                    this.genre=2;  //绑定邮箱
                }
                this.sta=1;
            }
        },
        mounted:function () {
            $.ajax({
                type:'get',
                url : '/employee_load',
                dataType : 'jsonp',
                success:(data)=>{
                    this.data.phoneNumber=data.success.obj.phone;
                    this.data.userNumebr=data.success.obj.usrNm;
                    this.data.department='收益部';
                    this.data.name=data.success.obj.compellation;
                    this.data.duty=data.success.obj.department.dptNm;
                    this.data.email=data.success.obj.email;
                    this.shut();
                },
            });
        },
        components:{
            validation:validation,
            email:email,
            emai2:emai2,
            phone:phone
        }
    }
</script>
<style scoped>
    .itemBindC{
        background-color:rgb(27, 52, 92) !important;
    }
</style>
